<script setup lang="ts">
  import { getbackupList, deleteBackUp, runBackup } from '@/api/syssetting';
  import { ref } from 'vue';
  import { TableInstance, Message } from '@arco-design/web-vue';
  import Edit from './edit/index.vue';
  import Add from './add/index.vue';
  import useLoading from '@/hooks/loading';
  defineOptions({
    name: 'companyList',
  });
  const { loading, setLoading } = useLoading(false);
  const proTableRef = ref<TableInstance | null>(null);
  // 表单类型
  const formType = ref([
    {
      name: 'title',
      label: '备份事件名称',
      type: 'a-input',
      fieldProps: {
        span: 8,
      },
    },
    {
      label: '状态',
      name: 'is_active',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 8,
      },
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '启用',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
  ]);
  const visible = ref(false);
  const isEdit = ref(false);
  const visible1 = ref(false);
  const editParam = ref();
  const tableType = [
    { dataIndex: 'bak_id', slotName: 'id' },
    {
      title: '备份事件名称',
      dataIndex: 'title',
    },
    {
      title: '执行备份时间',
      dataIndex: 'execution_time',
      align: 'center',
    },
    {
      title: '间隔备份天数',
      dataIndex: 'frequency',
      align: 'center',
    },

    {
      title: '状态',
      dataIndex: 'is_active',
      align: 'center',
    },
    {
      title: '备注',
      dataIndex: 'desc',
      align: 'center',
    },
    {
      title: '创建时间',
      dataIndex: 'create_time',
      align: 'center',
    },
    {
      title: '操作',
      width: 130,
      fixed: 'right',
      slotName: 'operations',
      menus: [
        {
          name: '编辑',
          onClick: (record: any) => {
            visible1.value = true;
            editParam.value = record.bak_id;
          },
        },
        {
          name: '删除',
          onClick: (record: any) => {
            deleteBackUp({
              bak_ids: [record.bak_id],
            }).then((res) => {
              proTableRef.value?.setRefresh();
              Message.success('删除成功！');
            });
          },
        },
      ],
    },
  ];
  async function request(params) {
    const res = await getbackupList(params);
    return {
      data: res.data,
    };
  }
  const showRun = ref(false);
  const handleRunBackup = () => {
    setLoading(true);
    runBackup().then((res) => {
      if (res.code === 200) {
        Message.success(res.msg);
      }
      setLoading(false);
    });
  };
  const sonformType = ref([
    {
      name: 'title',
      label: '备份事件名称',
      type: 'a-input',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      name: 'frequency',
      label: '执行频率（天）',
      type: 'a-input-number',
      fieldProps: {
        span: 18,
        mode: 'button',
        min: 1,
      },
      rules: [
        {
          required: true,
          message: '请输入',
        },
      ],
    },
    {
      name: 'execution_time',
      label: '执行时间',
      type: 'a-time-picker',
      fieldProps: {
        span: 24,
        format: 'HH:mm',
      },
      rules: [
        {
          required: true,
          message: '请选择',
        },
      ],
    },
    {
      label: '状态',
      name: 'is_active',
      slotName: 'status',
      type: 'a-select',
      fieldProps: {
        span: 24,
      },
      rules: [
        {
          required: true,
          message: '请选择',
        },
      ],
      selectOptions: [
        {
          status: 'success',
          value: 1,
          label: '启用',
        },
        {
          status: 'danger',
          value: 2,
          label: '禁用',
        },
      ],
    },
    {
      name: 'desc',
      label: '备注',
      type: 'a-textarea',
      fieldProps: {
        span: 24,
      },
    },
  ]);
</script>

<template>
  <div class="container">
    <pro-table
      ref="proTableRef"
      :formType="formType"
      title="备份事件列表"
      :request="request"
      :tableType="tableType"
    >
      <template #btns>
        <a-button
          type="primary"
          @click="
            () => {
              isEdit = false;
              visible = true;
            }
          "
        >
          <template #icon>
            <icon-plus />
          </template>
          添加备份事件
        </a-button>
        <a-button
          type="outline"
          @click="
            () => {
              showRun = true;
            }
          "
        >
          <template #icon>
            <icon-play-arrow-fill />
          </template>
          立即执行备份
        </a-button>
      </template>
      <template #options>
        <add
          v-if="visible"
          v-model:visible="visible"
          :formType="sonformType"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
        <edit
          v-if="visible1"
          v-model:visible="visible1"
          :formType="sonformType"
          :params="editParam"
          @refresh="
            () => {
              $refs.proTableRef.setRefresh();
            }
          "
        />
      </template>
    </pro-table>
    <a-modal
      v-model:visible="showRun"
      ok-text="执行备份"
      @ok="handleRunBackup"
      :ok-loading="loading"
      @cancel="
        () => {
          showRun = false;
        }
      "
    >
      <template #title> 系统操作 </template>
      <div style="width: 100%; text-align: center"
        >是否立即执行系统备份，执行备份后系统会在后台自动执行数据备份。</div
      >
    </a-modal>
  </div>
</template>

<style scoped lang="less"></style>
